<template>
    <div class="app-container">
        <el-input
            v-model="filterText"
            placeholder="Filter keyword"
            style="margin-bottom:30px;"
        />

        <el-tree
            ref="subjectTree"
            :data="subjectList"
            :props="defaultProps"
            :filter-node-method="filterNode"
            class="filter-tree"
            default-expand-all
        />

    </div>
</template>
  
  <script>
import subject from '@/api/subject/subject.js'
export default {
    data() {
        return {
            filterText: '',
            subjectList: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.subjectTree.filter(val)
        }
    },

    created() {
        this.fetchNodeList()
    },

    methods: {
        fetchNodeList() {
            subject.getTreeList().then(response => {
                if (response.success === true) {
                    this.subjectList = response.data.list
                }
            })
        },
        filterNode(value, data) {
            if (!value) return true
            return data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
        }
    }
}
</script>
